<script setup>

import {useRoute} from "vue-router";
import {useFullscreen} from '@vueuse/core'
import blogStore from "@/stores/arlog.js";
import router from "@/router/index.js";
import {NButton} from "naive-ui";
import api from "@/api/api.js";


/*全屏 功能*/
const {isFullscreen, toggle} = useFullscreen()

/*面包屑 获取当前路由*/
const route = useRoute()
const activeKey = computed(() => route.name)

/*打开链接*/
function handleLinkClick(link) {
  window.open(link)
}

/*获取当前用户*/
/*声明本地持久化st*/
const st = blogStore()

/*右上角头像菜单*/
const options = [
  {
    label: "用户资料",
    key: "profile",
    icon: () => h('i', {class: 'i-ep-user-filled'})
  },
  {
    label: "修改密码",
    key: "editProfile",
    icon: () => h('i', {class: 'i-ep-edit'})
  },
  {
    label: "退出登录",
    key: "logout",
    icon: () => h('i', {class: 'i-ep-switch-button'})
  }
]

/*修改密码料弹出变量*/
const showModal = ref(false)

/*菜单点击选项功能*/
function handleSelect(key) {
  switch (key) {
    case 'profile':
      router.push('/admin/profile')
      break
    case 'editProfile':
      showModal.value = true
      break
    case 'logout':
      $dialog.warning({
        title: "用户注销！",
        content: "你确定退出？",
        positiveText: "确定",
        negativeText: "取消",
        onPositiveClick: () => {

          st.token = ""
          $message.warning(st.user + "已经注销")
          router.push('/login')

        },
        onNegativeClick: () => {
          $message.success("取消")
        }
      })

      break
  }
}

/*新密码修改*/
const formValue = ref({
  pass: "",
  password: ""
})

const passwordMatch = ref(true) // 用于跟踪密码是否匹配

const checkPassword = () => {
  passwordMatch.value = formValue.value.pass === formValue.value.password;
}

const add = () => {
  if (!passwordMatch.value) {
    // 这里可以使用 Naive UI 的 Message 组件显示错误信息
    $message.error("两次输入的新密码不一致，请重新输入。")
    return
  }
  const upUser = ref({
    username: st.user,
    password: formValue.value.password
  })

  api.upUser(upUser.value).then(
      res => {
        // 提示
        $message.success("更新:" + res.data.msg)
        showModal.value = false
      }
  )

}


</script>

<template>
  <!--图标-->
  <div class="flex items-center  min-w-1600px">
    <!-- 左侧图标 -->
    <div class="flex justify-center items-center h-60px w-50px">
      <n-icon class="i-ep-expand " color="rgba(87, 89, 87, 0.9)" size="25"/>
    </div>
    <!--面包屑-->
    <div>
      <n-tag :bordered="false" type="warning">
        {{ activeKey }}
      </n-tag>
    </div>


    <div class="flex mr-16 cursor-pointer  gap-16 ml-auto  w-200px" style="color: rgba(87, 89, 87, 0.9);">
      <!--  右边功能区域  -->
      <span class="mx-6  ">|</span>
      <!--    全屏功能  -->
      <n-popover trigger="hover">
        <template #trigger>
          <n-icon
              :class="isFullscreen ? 'i-ep-close-bold' : 'i-ep-full-screen'"
              size="25"
              @click="toggle"
          />
        </template>
        全屏
      </n-popover>


      <!--     跳转gitee -->
      <n-popover trigger="hover">
        <template #trigger>
          <n-icon class="i-simple-icons-gitee " size="25"
                  @click="handleLinkClick('https://gitee.com/cooting/arlog')"/>
        </template>
        跳转gitee
      </n-popover>

      <n-popover trigger="hover">
        <template #trigger>
          <n-icon class="i-simple-icons-github " size="25"
                  @click="handleLinkClick('https://gitee.com/cooting/arlog')"/>
        </template>
        跳转github
      </n-popover>

      <n-popover trigger="hover">
        <template #trigger>
          <n-icon class="i-simple-icons-tencentqq " size="25"
                  @click="handleLinkClick('https://gitee.com/cooting/arlog')"/>
        </template>
        联系QQ
      </n-popover>


      <n-popover trigger="hover">
        <template #trigger>
          <n-icon class="i-simple-icons-wechat" size="25"
                  @click="handleLinkClick('https://gitee.com/cooting/arlog')"/>
        </template>
        联系微信
      </n-popover>


    </div>

    <!--个人资料区域   -->
    <div class=" mr-16">

      <n-dropdown :options="options" @select="handleSelect">
        <div class="flex cursor-pointer items-center">
          <n-avatar :size="48" :src=st.img round/>
          <div class="ml-12 flex flex-col ">

            <span class="text-20 opacity-70 text-center h-25px">{{ st.user }}</span>

            <span class="text-12 opacity-50 self-center text-center ">[超级管理员]</span>

          </div>
        </div>
      </n-dropdown>
    </div>


  </div>

  <!--动态弹出框-->
  <n-modal v-model:show="showModal">
    <n-card
        :bordered="false"
        aria-modal="true"
        role="dialog"
        size="huge"
        style="width: 500px"
        title="修改密码"
    >
      <n-form ref="formRef" :model="formValue"
              label-placement="left">
        <n-form-item label="密码" path="pass">
          <n-input
              v-model:value="formValue.pass"
              :input-props="{ autocomplete: 'off' }"
              :status="passwordMatch ? 'success' : 'error'"
              placeholder="新密码"
              show-password-on="mousedown"
              type="password"
              @input="checkPassword"
          />
        </n-form-item>

        <n-form-item label="确认" path="password">
          <n-input
              v-model:value="formValue.password"
              :input-props="{ autocomplete: 'off' }"
              :status="passwordMatch ? 'success' : 'error'"
              placeholder="确认密码"
              show-password-on="mousedown"
              type="password"
              @input="checkPassword"
          />
        </n-form-item>

      </n-form>

      <template #footer>
        <div class="grid place-items-end ">
          <n-button class="w-100" type="info" @click="add">
            确认
          </n-button>
        </div>
      </template>
    </n-card>
  </n-modal>


</template>
<style scoped>

</style>
